/**
* 团队管理
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ImageBackground, ScrollView } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import Echarts from 'native-echarts';
import { getStore } from '../../redux/index.js';
class TeamManagerView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            refreshing: false
        }
        this.userInfo = getStore().getState().auth.userInfo
        this.option1 = {
            legend: { data: ['直营', '团队'], right: '20', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: [], axisTick: { "show": false }, splitLine: { "show": false }, axisLine: { "show": true, lineStyle: { color: "#999999" } } },
            yAxis: {
                show: true, axisTick: { "show": false }, splitLine: { "show": true }, axisLine: { "show": true, lineStyle: { color: "#999999" } }, axisLabel: {
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = parseFloat(value * 0.0001).toFixed(1) + "万";
                        } else if (value >= 10000000) {
                            value = parseFloat(value * 0.0000001).toFixed(1) + "千万";
                        }
                        return value
                    }
                }, scale: true
            },
            grid: {
                left: 15,
                containLabel: true
            },
            series: [{
                name: '直营', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: {
                    normal: { color: "#378EFB", label: { show: false } }
                }
            }, {
                name: '团队', type: 'line', data: [],
                smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: { normal: { color: '#FC2222', label: { show: false } } }
            }]
        }
        this.option2 = {
            legend: { data: ['直营', '团队'], right: '20', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category', data: [], axisTick: { "show": false }, splitLine: { "show": false }, axisLine: { "show": true, lineStyle: { color: "#999999" } }
            },
            yAxis: {
                show: true, axisTick: { "show": false }, splitLine: { "show": true }, axisLine: { "show": true, lineStyle: { color: "#999999" } }, axisLabel: {
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = parseFloat(value * 0.0001).toFixed(1) + "万";
                        } else if (value >= 10000000) {
                            value = parseFloat(value * 0.0000001).toFixed(1) + "千万";
                        }
                        return value
                    }
                }, scale: true
            },
            grid: {
                left: 15,
                containLabel: true
            },
            series: [{
                name: '直营', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: {
                    normal: { color: "#378EFB", label: { show: false } }
                }
            },
            {
                name: '团队', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6,
                itemStyle: { normal: { color: '#FC2222', label: { show: false } } }
            },
            ]
        }
        this.option3 = {
            legend: { data: ['直营', '团队'], right: '20', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: [], axisTick: { "show": false }, splitLine: { "show": false }, axisLine: { "show": true, lineStyle: { color: "#999999" } } },
            yAxis: {
                show: true, axisTick: { "show": false }, splitLine: { "show": true }, axisLine: { "show": true, lineStyle: { color: "#999999" } }, axisLabel: {
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = parseFloat(value * 0.0001).toFixed(1) + "万";
                        } else if (value >= 10000000) {
                            value = parseFloat(value * 0.0000001).toFixed(1) + "千万";
                        }
                        return value
                    }
                }, scale: true
            },
            grid: {
                left: 15,
                containLabel: true
            },
            series: [{
                name: '直营', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: {
                    normal: { color: "#378EFB", label: { show: false } }
                }
            },
            {
                name: '团队', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6,
                itemStyle: { normal: { color: '#FC2222', label: { show: false } } }
            },
            ]
        }
    }
    componentDidMount() {
        this.getHomeData()
    }
    getHomeData() {
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_INDEX, { token: this.userInfo.token, users_id: this.props.users_id })).then((res) => {
            if (res) {
                for (let key in res.trade.direct_daily) {
                    if (res.trade.direct_daily.hasOwnProperty(key)) {
                        this.option1.xAxis.data.push(key)
                        this.option1.series[0].data.push(res.trade.direct_daily[key])
                        this.option1.series[1].data.push(res.trade.team_daily[key])
                    }
                }
                for (let key in res.user.direct_daily) {
                    if (res.user.direct_daily.hasOwnProperty(key)) {
                        this.option2.xAxis.data.push(key)
                        this.option2.series[0].data.push(res.user.direct_daily[key])
                        this.option2.series[1].data.push(res.user.team_daily[key])
                    }
                }
                for (let key in res.activate.direct_daily) {
                    if (res.activate.direct_daily.hasOwnProperty(key)) {
                        this.option3.xAxis.data.push(key)
                        this.option3.series[0].data.push(parseFloat(res.activate.direct_daily[key]))
                        this.option3.series[1].data.push(parseFloat(res.activate.team_daily[key]))
                    }
                }
                this.homeDetail = res
            }
            this.setState({ loading: false })
        })
    }
    componentWillUnmount() {
    }
    renderHeader() {
        return (
            <View style={styles.header}>
                <View style={{ marginTop: Dimens.StatusBarHeight, height: 44, flexDirection: 'row', justifyContent: 'flex-start' }}>
                    <View style={{ flex: 1 }}>
                        <TouchableOpacity style={{ marginLeft: 15, justifyContent: 'center', flex: 1 }} activeOpacity={0.8} onPress={() => {
                            Actions.pop()
                        }}>
                            <Image source={ImageRes.team_back} style={{ width: 20, height: 20 }}></Image>
                        </TouchableOpacity>
                    </View>
                    <View style={{ flex: 1, justifyContent: 'center' }}>
                        <Text style={{ fontSize: 20, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                            {this.props.title}
                        </Text>
                    </View>
                    <View style={{ flex: 1 }}>
                        <TouchableOpacity style={{ flex: 1, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                            Actions.teamRateView({ real_name: this.props.title, mobile: this.props.mobile, users_id: this.props.users_id })
                        }}>
                            <Image source={ImageRes.team_setting} style={{ width: 27, height: 6, alignSelf: 'flex-end', marginRight: 15 }}></Image>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ height: 55, flexDirection: 'row', marginBottom: 10 }}>
                    <View style={{ flex: 1, justifyContent: 'center' }}>
                        <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center' }} activeOpacity={0.8} onPress={() => {
                                    Actions.teamWeeklyTradeView({ users_id: this.props.users_id })
                                }}>
                            <Text style={{ fontSize: 20, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                {this.homeDetail && this.homeDetail.repayment_amount}
                            </Text>
                            <Text style={{ fontSize: 14, color: "rgba(255, 255, 255, 0.8)", alignSelf: 'center', marginTop: 8 }}>总交易额(万元）</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{ backgroundColor: 'rgba(255, 255, 255, 0.24)', width: 1, height: 40, marginTop: 10 }}></View>
                    <View style={{ flex: 1, justifyContent: 'center' }}>
                        <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center' }} activeOpacity={0.8} onPress={() => {
                                        Actions.teamManagerListView({users_id: this.props.users_id})
                                    }}>
                            <Text style={{ fontSize: 20, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                {this.homeDetail && this.homeDetail.team_user}
                            </Text>
                            <Text style={{ fontSize: 14, color: "rgba(255, 255, 255, 0.8)", alignSelf: 'center', marginTop: 8 }}>总用户量(人）</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
    renderShadowView(title, value) {
        return (
            <View style={{ width: (Dimens.DeviceWidth - 60) / 3, height: 0.75 * (Dimens.DeviceWidth - 60) / 3, marginLeft: 15 }}>
                <View style={{ backgroundColor: '#378EFB', width: (Dimens.DeviceWidth - 60) / 3, borderTopLeftRadius: 5, borderTopRightRadius: 5, alignSelf: 'center', height: 25, justifyContent: 'center' }}>
                    <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>{title}</Text>
                </View>
                <View style={{ flex: 1, justifyContent: 'center', borderWidth: 1, borderColor: '#FAFAFA' }}>
                    <Text style={{ fontSize: 13, color: "#333333", alignSelf: 'center', fontWeight: 'bold' }}>{value}</Text>
                </View>
            </View>
        )
    }
    renderTrade(tradeData) {
        return (
            <View style={{ backgroundColor: '#ffffff' }}>
                <View style={{ flexDirection: 'row', padding: 15, justifyContent: 'space-between' }}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>近七天交易额</Text>
                    <TouchableOpacity style={{ justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamWeeklyTradeView({ users_id: this.props.users_id })
                    }}>
                        <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>更多</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                <View style={{ flexDirection: 'row', marginTop: 15 }}>
                    {this.renderShadowView('直营', tradeData.direct)}
                    {this.renderShadowView('团队', tradeData.team)}
                    {this.renderShadowView('总计', tradeData.total)}
                </View>
                <View style={{ marginTop: 15 }}>
                    <Echarts option={this.option1} height={300} />
                </View>
            </View>
        )
    }
    renderTeamData(userData) {
        return (
            <View style={{ backgroundColor: '#ffffff', marginVertical: 10 }}>
                <View style={{ flexDirection: 'row', padding: 15, justifyContent: 'space-between' }}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>近七天团队增长量</Text>
                    <TouchableOpacity style={{ justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamWeeklyTeamDataView({ users_id: this.props.users_id })
                    }}>
                        <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>更多</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                <View style={{ flexDirection: 'row', marginTop: 15 }}>
                    {this.renderShadowView('直营增长量', userData.direct + '人')}
                    {this.renderShadowView('团队增长量', userData.team + '人')}
                    {this.renderShadowView('总增长量', userData.total + '人')}
                </View>
                <View style={{ marginTop: 15 }}>
                    <Echarts option={this.option2} height={300} />
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 20 }}></View>
            </View>
        )
    }
    renderActiveData(activeData) {
        return (
            <View style={{ backgroundColor: '#ffffff', marginTop: 10 }}>
                <View style={{ flexDirection: 'row', padding: 15, justifyContent: 'space-between' }}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>近七天激活增长量</Text>
                    <TouchableOpacity style={{ justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamWeeklyActiveView({ users_id: this.userInfo.user.id })
                    }}>
                        <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>更多</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                <View style={{ flexDirection: 'row', marginTop: 15 }}>
                    {this.renderShadowView('直营', activeData.direct + '人')}
                    {this.renderShadowView('团队', activeData.team + '人')}
                    {this.renderShadowView('总计', activeData.total + '人')}
                </View>
                <View style={{ marginTop: 15 }}>
                    <Echarts option={this.option3} height={300} />
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 20 }}></View>
            </View>
        )
    }
    renderEmpty() {
        return (
            <View style={{ flex: 1, backgroundColor: "#ffffff" }}>
                <Image source={ImageRes.team_no_auth} style={{ width: Dimens.DeviceWidth - 100, height: (Dimens.DeviceWidth - 100) * 0.6, alignSelf: 'center', marginTop: 80 }} />
                <Text style={{ fontSize: 15, color: "#666666", alignSelf: 'center' }}>您还未实名认证哦！</Text>
                <TouchableOpacity style={{ marginTop: 50, backgroundColor: '#378EFB', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {

                }}>
                    <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>实名认证</Text>
                </TouchableOpacity>
            </View>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                {this.renderHeader()}
                <ScrollView showsVerticalScrollIndicator={false}>
                    {this.homeDetail && this.renderTrade(this.homeDetail.trade)}
                    {this.homeDetail && this.renderTeamData(this.homeDetail.user)}
                    {this.homeDetail && this.renderActiveData(this.homeDetail.activate)}
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color,
    },
    header: {
        width: Dimens.DeviceWidth,
        backgroundColor: "#378EFB",
        height: 200,
        justifyContent: 'space-between'
    }
});
const ExportView = connect()(TeamManagerView);
module.exports.TeamManagerView = ExportView
